<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>上手使用</title>
  </head>
  <body>
    <!-- <a href="index.html">index</a> -->
    <div class="container mt-4">
      <h3>什么是JQDE？</h3>
      <p class="font-weight-light text-muted text-break mt-4">
        是一套基于Webpack搭建的jQuery项目开发环境(jQuery development environment)，使jQuery项目能够以前后端分离模式进行开发，这是一种有效提高开发效率的先进模式。<!--
        -->利用此环境前端开发人员无需搭建后台环境，只需要配置相应的代理地址即可实现前后端的数据流通。并且此环境配置了对Sass和Stylus两种CSS样式预编译语言的配置，<!--
        -->可以直接使用这些语言高效快速的编写界面样式。
      </p>

      <h3>开始使用</h3>
      <p class="font-weight-light text-muted text-break mt-4">
        对于多页面的jQuery项目，每个页面需要一个入口文件，入口文件的名称需要与页面名称严格对应，并且分别放置在src目录下的script和view目录中，这两个目录名称及位置不允许被改变。<!--
        -->例如当前页面为view中的demo.html，对应的脚本入口文件为script中的demo.js，这是该页面的主入口文件。这样Webpack会将两个文件建立联系，而样式文件及其他脚本或库的引入都<!--
        -->可以在主入口文件中通过import或者require引入。
      </p>
      <figure class="figure">
        <img src="../static/img/src.png" class="figure-img img-fluid rounded" />
      </figure>

      <h3>配置代理</h3>
    </div>

    <!-- <div id="test"></div> -->

    <div class="jumbotron jumbotron-fluid shadow-sm mt-4">
      <div class="container">
        <div class="card-deck mb-3 text-center">
          <div class="card mb-4 shadow-sm">
            <div class="card-header">
              <h4 class="my-0 font-weight-normal">全球累计确诊</h4>
            </div>
            <div class="card-body" id="global">
              <h1 class="card-title pricing-card-title">---- <small class="text-muted">/ 例</small></h1>
              <p class="card-text">较昨日新增 <span>----</span></p>
              <button type="button" class="btn btn-md btn-outline-primary">数据详情</button>
            </div>
          </div>
          <div class="card mb-4 shadow-sm">
            <div class="card-header">
              <h4 class="my-0 font-weight-normal">国外累计确诊</h4>
            </div>
            <div class="card-body" id="foreign">
              <h1 class="card-title pricing-card-title">---- <small class="text-muted">/ 例</small></h1>
              <p class="card-text">较昨日新增 <span>----</span></p>
              <button type="button" class="btn btn-md btn-primary">数据详情</button>
            </div>
          </div>
          <div class="card mb-4 shadow-sm">
            <div class="card-header">
              <h4 class="my-0 font-weight-normal">国内累计确诊</h4>
            </div>
            <div class="card-body" id="demostic">
              <h1 class="card-title pricing-card-title">---- <small class="text-muted">/ 例</small></h1>
              <p class="card-text">较昨日新增 <span>----</span></p>
              <button type="button" class="btn btn-md btn-primary">数据详情</button>
            </div>
          </div>
        </div>

        <p class="text-center">数据来源 <a class="font-weight-bold text-decoration-none" href="https://www.tianapi.com/" target="_bank">天行数据</a></p>
      </div>
    </div>

    <div class="container mt-4">
      <p class="font-weight-light text-muted text-break mt-4">
        上面的显示的信息是对于Webpack请求代理配置的自验和功能展示，千万不要以为是广告植入。这里去请求了一个第三方的接口地址，如果你目前是通过npm start启动的项目，<!--
        -->那么这些数据是动态获取的，如果你是从dist中直接打开的本地页面，那么这些数据从有页面引入的json中获取。代理接口地址的修改在server.js中可以看到proxy属性，<!--
        -->请根据自己项目情况自行设定。另外，开发环境端口后的配置也在此文件中。
      </p>
      <img src="../static/img/proxy-set.png" class="rounded d-block" />

      <h3 class="mt-4">全局变量的配置</h3>
      <p class="font-weight-light text-muted text-break mt-4">
        通过Webpack的DefinePlugin，我们可以获取到指定变量在不同开发环境下的取值，这些配置在config目录下的dev.config.js和prod.config.js两个文件中。现在你可以<!--
        -->打开控制台查看当前对API变量的取值情况。
      </p>

      <h3 class="mt-4">全局引入jQuery、Lodash、Echarts</h3>
      <p class="font-weight-light text-muted text-break mt-4">
        在配置webpack时已将jQuery、Lodash、Echarts这三个常用库全局引入，各个模块中可直接调用。就像本页面在demo.js中将他们直接打印出来，但没有在文件顶部引入，你可以去控制台查看打印结果。
      </p>
      <figure class="figure">
        <img src="../static/img/global-import.png" class="figure-img img-fluid rounded" />
      </figure>

      <h3 class="mt-4">图片的引入</h3>
      <div class="card-deck text-center">
        <div class="card mb-4 shadow-sm">
          <div class="card-body">
            <figure class="figure">
              <img src="../static/img/bg-1.jpg" class="figure-img img-fluid rounded" />
              <figcaption class="figure-caption">img标签src引入</figcaption>
            </figure>
          </div>
        </div>
        <div class="card mb-4 shadow-sm">
          <div class="card-body">
            <figure class="figure">
              <img class="figure-img img-fluid rounded" id="script-import" />
              <figcaption class="figure-caption">script脚本import引入</figcaption>
            </figure>
          </div>
        </div>
        <div class="card mb-4 shadow-sm">
          <div class="card-body">
            <figure class="figure">
              <div class="rounded" id="css-bg">
                <img src="../static/img/bg-1.jpg" class="figure-img img-fluid rounded" style="visibility: hidden;" />
              </div>
              <figcaption class="figure-caption">css样式background引入</figcaption>
            </figure>
          </div>
        </div>
      </div>

      <h3 class="mt-4">字体图标的引入</h3>
      <p class="font-weight-light text-muted text-break mt-4">只需在主入口文件或页面对应的css文件中引入相应的字体css文件即可，示例图标：<span class="iconfont icon-d"></span></p>
      <p class="font-weight-light text-muted text-break">你还可以尝试<a class="text-decoration-none" target="_bank" href="https://icons.bootcss.com/">Bootstrap Icons</a></p>
      <p class="font-weight-light text-muted text-break">同时了解下<a class="text-decoration-none" target="_bank" href="https://v4.bootcss.com/">Bootstrap4</a></p>

      <h3 class="mt-4">关于HTML文件没有热重载</h3>
      <p class="font-weight-light text-muted text-break mt-4">
        由于为了满足img标签通过src属性链接图片而采用了html-loader，目前不能实现Html文件变更的响应。
      </p>

      <h3 class="mt-4">模拟Element的Select选择器</h3>
      <p>
        <!-- 调用Select选择器时html部分的标准结构，id自定 -->
        <div class="selector" id="years">
          <input class="form-control" />
        </div>
      </p>
      <p class="font-weight-light text-muted text-break mt-4">
        Select选择器基于jQuery和jQuery.niceScroll（存放在lib目录下）及Bootstrap编写，存放在plugin目录下，使用时先引入该插件后$('')选择元素调用.select方法，接收数据数组和回调两个参数。<!--
        -->提供setData、setValue、setCallback和value四个接口，分别用来初始化后更新数据、设值、添加或修改回调、取值。select.sass文件顶部定义有颜色变量可修改。
      </p>
      <figure class="figure">
        <img src="../static/img/select-html.png" class="figure-img img-fluid rounded" />
        <img src="../static/img/import-select.png" class="figure-img img-fluid rounded" />
      </figure>

      <br />
      <a class="btn btn-primary btn-middle" href="./index.html" role="button">Back to index</a>
    </div>
  </body>
</html>
